<template>
  <van-nav-bar
      :title="title"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
    <template #right>
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>

  <div id="content">
<!--    根据不同的页面展示不同的内容-->
    <router-view/>
  </div>

  <van-tabbar route>
    <van-tabbar-item  to="/" icon="home-o">主页</van-tabbar-item>
    <van-tabbar-item  to="/team" icon="search">队伍</van-tabbar-item>
    <van-tabbar-item  to="/user" icon="friends-o">个人</van-tabbar-item>
  </van-tabbar>


</template>

<script setup lang="ts" >
import {useRouter} from 'vue-router'
import {ref} from "vue";
import routes from "../config/route.js";
const router = useRouter();

//默认标签
const DEFAULT_TITLE='伙伴匹配'
const title=ref(DEFAULT_TITLE)

//监听页面路径变化
router.beforeEach((to, from)=>{
  const toPath=to.path
  const rte=routes.find((rt)=>{
    return toPath == rt.path
  })

  title.value=rte?.title ?? DEFAULT_TITLE
})


//点击左侧回到首页
const onClickLeft = () => {
  // router.push("/")
  //回到上一级
  router.back()
}
//点击右侧 进行搜索
const onClickRight = () =>{
  //跳转路由页面
  router.push('/search')
}

</script>

<style scoped>

#content{
  padding-bottom: 50px;
}

</style>